<template>
    <div v-show="isShow" class="rightScreen">
        <div class="gnssDescription">
            <span>南北:</span>
            <span>{{ gnssData.NaS }}</span>
            <span>米</span>
        </div>
        <div class="gnssDescription">
            <span>东西:</span>
            <span>{{ gnssData.EaW }}</span>
            <span>米</span>
        </div>
        <div class="gnssDescription">
            <span>高度:</span>
            <span>{{ gnssData.Height }}</span>
            <span>米</span>
        </div>
        <!-- <div class="gnssDescription">
            <span>高程:</span>
            <span>{{ gnssData.Elevation }}</span>
            <span>米</span>
        </div> -->
        <div class="chartMi" ref="Midiv">
            <a-spin size="large" tip="数据同步中..." />
        </div>
        <div class="gnssDescription">
            <span>纬度:</span>
            <span>{{ gnssData.Latitude }}</span>
            <span>du</span>
        </div>
        <div class="gnssDescription">
            <span>经度:</span>
            <span>{{ gnssData.Longitude }}</span>
            <span>du</span>
        </div>
        <div class="chartDu" ref="Dudiv">
            <a-spin size="large" tip="数据同步中..." />
        </div>
        <div style="width: 400px;position: absolute;left: calc(50% - 200px);bottom: 8%;text-align: center;">
            <p style="font-size: 30px; color:rgb(21 66 167);">图表刻度修改功能</p>
            <a-checkbox-group style="color: blue;" v-model:value="checkedList" :options="plainOptions" />
            <br>
            <div>
                <a-input-number id="inputNumber" v-model:value="value"/>
                <a-button @click="msgFn(checkedList, value)">修改</a-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import eventbus from '@/until/eventbus';
import * as echarts from 'echarts'
import { message } from 'ant-design-vue';

let gnssData = reactive({ NaS: 0, EaW: 0, Height: 0, Latitude: 0, Longitude: 0, Elevation: 0 })

let Midiv = ref(null)
let Dudiv = ref(null)
let isShow = ref(true)
let checkedList = ref([])
let plainOptions = ref(['倾角Z', '倾角XY', '倾角速度', '倾角加速度', '位移变化量', '绝对经纬度'])

let chartlengthMi = 1000
let chartlengthDu = 1000

// 位移存储数组
let MiaxielArr = [
    {
        name: '南北',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(16, 36, 251, 1)"
        }
    },
    {
        name: '东西',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(235, 104, 39, 1)"
        }
    },
    {
        name: '高度',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(35, 222, 107, 1)"
        }
    },
    {
        name: '高程',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        // itemStyle: {
        //     color: "rgba(35, 222, 107, 1)"
        // }
    },
]

// 经纬度存储数组
let DuaxielArr = [
    {
        name: '纬度',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(16, 36, 251, 1)"
        }
    },
    {
        name: '经度',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(235, 104, 39, 1)"
        }
    },
]

// CenterButton.vue line:14
eventbus.on('toggle2', () => {
    isShow.value = !isShow.value
})
eventbus.on('gnssData', (data) => {
    gnssData.NaS = data[0];
    gnssData.EaW = data[1];
    gnssData.Height = data[2];
    gnssData.Latitude = data[3];
    gnssData.Longitude = data[4];
    gnssData.Elevation = data[5];
})

eventbus.on('SixAxiel', (data) => {
    let axielMi = [data.EaWarr, data.NaSarr, data.Heightarr, data.Elevationarr]
    let axielDu = [data.Latitudearr, data.Longitudearr]
    // console.log(axielMi);
    // console.log(axielDu);
    echartMi(axielMi, Midiv.value, chartlengthMi)
    echartDu(axielDu, Dudiv.value, chartlengthDu)
})

function echartMi(axiel, doms, length) {
    const chart = echarts.init(doms)
    // var base = new Date()
    let Options = {}
    for (var i = 0; i < axiel[0].length; i++) {
        MiaxielArr[0].data.push(axiel[1][i])
        MiaxielArr[1].data.push(axiel[0][i])
        MiaxielArr[2].data.push(axiel[2][i])
        // MiaxielArr[3].data.push(axiel[3][i])
    }
    if (MiaxielArr[0].data.length < length) {
        Options = {
            title: {
                text: '位移变化量',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['南北', '东西', '高度']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 100,
                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: MiaxielArr
        }
    } else {
        let t = MiaxielArr[0].data.length - length
        for (var i = 0; i < t; i++) {
            MiaxielArr[0].data.shift()
            MiaxielArr[1].data.shift()
            MiaxielArr[2].data.shift()
        } Options = {
            title: {
                text: '位移变化量',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['南北', '东西', '高度']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 100,
                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: MiaxielArr
        }
    }
    chart.setOption(Options)
}
function echartDu(axiel, doms, length) {
    const chart = echarts.init(doms)
    // var base = new Date()
    let Options = {}
    for (var i = 0; i < axiel[0].length; i++) {
        DuaxielArr[0].data.push(axiel[0][i])
        DuaxielArr[1].data.push(axiel[1][i])
    }
    if (DuaxielArr[0].data.length < length) {
        Options = {
            title: {
                text: '绝对经纬度',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['纬度', '经度']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 100,
                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: DuaxielArr
        }
    } else {
        let t = DuaxielArr[0].data.length - length
        for (var i = 0; i < t; i++) {
            DuaxielArr[0].data.shift()
            DuaxielArr[1].data.shift()
        } Options = {
            title: {
                text: '绝对经纬度',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['纬度', '经度']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 100,
                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: DuaxielArr
        }
    }
    chart.setOption(Options)
}

function msgFn(checkedList, length) {
    message.success('修改成功，图标刻度随新数据同时改变');
    if (checkedList.includes('倾角Z')) {
        eventbus.emit('qjz', length)
    }
    if (checkedList.includes('倾角XY')) {
        eventbus.emit('qjxy', length)
    }
    if (checkedList.includes('倾角速度')) {
        eventbus.emit('qjsd', length)
    }
    if (checkedList.includes('倾角加速度')) {
        eventbus.emit('qjjsd', length)
    }
    if (checkedList.includes('位移变化量')) {
        eventbus.emit('wybhl', length)
    }
    if (checkedList.includes('绝对经纬度')) {
        eventbus.emit('jdjwd', length)
    }
}

eventbus.on('wybhl', (data) => {
    chartlengthMi = data
})
eventbus.on('jdjwd', (data) => {
    chartlengthDu = data
})

</script>

<style scoped>
.rightScreen {
    width: 30vw;
    height: 100vh;
    background-color: rgba(226, 243, 250, 0.192);
    z-index: 1000;
    position: fixed;
    right: 0;
    bottom: 0;
    box-shadow: -2px -3px 2px 1px rgb(0 0 0 / 9%);
}

.gnssDescription {
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom: solid 2px rgba(151, 148, 148, 0.425);
    color: rgb(21 66 167);
}

.chartMi {
    width: 100%;
    height: 200px;
    /* margin-bottom: 20px; */
    text-align: center;
    line-height: 200px;
    border-bottom: 2px solid rgba(151, 148, 148, 0.425);
    pointer-events: auto;
}

.chartDu {
    width: 100%;
    height: 200px;
    /* margin-bottom: 20px; */
    text-align: center;
    line-height: 200px;
    border-bottom: 2px solid rgba(151, 148, 148, 0.425);
    pointer-events: auto;
}
</style>